<template>
  <div>
    <div class="login-view">
      <div class="login-wrap">
        <div class="container">
          <div class="banner-box">
            <el-row>
              <el-col :span="7" :offset="16">
                <div class="login-form">
                  <el-tabs type="border-card" activeName="loginForm">
                    <el-tab-pane :label="$t('loginView.sign_up')" name="registerForm">
                      <el-form :model="registerFormData">
                        <el-form-item label="">
                          <el-input v-model="registerFormData.account" placeholder="邮箱"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary">{{$t('loginView.sign_up')}}</el-button>
                        </el-form-item>
                      </el-form>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('loginView.login')" name="loginForm">
                      <el-form :model="loginFormData" :rules="loginRules" ref="loginFormData">
                        <el-form-item label="" prop="account">
                          <el-input v-model="loginFormData.account" placeholder="输入任意字符"></el-input>
                        </el-form-item>
                        <el-form-item label="" prop="password">
                          <el-input v-model="loginFormData.password" placeholder="输入任意密码"></el-input>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" @click="onLogin('loginFormData')">{{$t('loginView.login')}}</el-button>
                        </el-form-item>
                      </el-form>
                      <el-row>
                        <el-col :span="12">
                          <router-link to="/main/notice">{{$t('loginView.forgot_password')}}</router-link>
                        </el-col>
                        <el-col :span="12" class="tr">
                          <router-link to="/main/notice">{{$t('loginView.account_locked')}}</router-link>
                        </el-col>
                      </el-row>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="service-wrap">
        <div class="container">
          <el-row>
            <el-col :span="22" :offset="1">
              <div class="service-box">
                <el-row>
                  <el-col :span="8">
                    <div class="service-item">
                      <div class="item-icon">
                        <i class="iconfont icon-fuwuchaoshi"></i>
                      </div>
                      <div class="item-text">
                        <h4>{{$t('loginView.cash_payment')}}</h4>
                        {{$t('loginView.cash_payment_desc')}}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="service-item">
                      <div class="item-icon">
                        <i class="iconfont icon-yinhangdaishou"></i>
                      </div>
                      <div class="item-text">
                        <h4>{{$t('loginView.bank_integration')}}</h4>
                        {{$t('loginView.bank_integration_desc')}}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="service-item">
                      <div class="item-icon">
                        <i class="iconfont icon-24xiaoshiqiantai"></i>
                      </div>
                      <div class="item-text">
                        <h4>{{$t('loginView.around_the_clock')}}</h4>
                        {{$t('loginView.around_the_clock_desc')}}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="describe-wrap">
        <div class="container">
          <el-row>
            <el-col :span="22" :offset="1">
              <div class="describe-box">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <div class="describe-item">
                      <div class="item-text">
                        <h4>{{$t('loginView.simplicity')}}</h4>
                        {{$t('loginView.simplicity_desc')}}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="describe-item">
                      <div class="item-text">
                        <h4>{{$t('loginView.efficiency')}}</h4>
                        {{$t('loginView.efficiency_desc')}}
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="describe-item">
                      <div class="item-text">
                        <h4>{{$t('loginView.anytime_anywhere')}}</h4>
                        {{$t('loginView.anytime_anywhere_desc')}}
                      </div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      loginFormData: {
        account: '',
        password: ''
      },
      registerFormData: {
        account: ''
      },
      loginRules: {
        account: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    ...mapActions(['updateloginDataAction']),
    onLogin (formName) {
      let _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          _this.$message({
            message: _this.$t('tip.login_success'),
            type: 'success'
          })
          _this.updateloginDataAction({login: true, userName: 'ccc'})
          _this.$router.push('/main/account')
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="less">
  .login-view{
    .login-wrap{
      background-color: #013878;
      .banner-box{
        height: 400px;
        background: url('../../assets/image/test/homepage_bg.png') no-repeat;
        background-size: 100% 100%;
        .login-form{
          padding: 50px 0;
          .el-tabs__nav{
            width: 100%;
            .el-tabs__item {
              width: 50%;
              text-align: center;
            }
          }
          .el-button{width: 100%;}
        }
      }
    }
    .service-wrap{
      background-color: #fff;
      .service-box{
        height: 300px;
        padding-top: 55px;
        .service-item{
          text-align: center;
          .item-icon{
            width: 80px;
            height: 80px;
            display: inline-block;
            border-radius: 50%;
            background: #7CA0B5;
            vertical-align: middle;
            line-height: 80px;
            i{
              font-size: 48px;
              color: #fff;
            }
          }
          .item-text{
            padding-top: 15px;
            font-size: 14px;
            color: #666;
            word-wrap: break-word;
            white-space: normal;
            h4{
              font-size: 18px;
              color: #666;
              font-weight: 400;
              margin: 5px 0;
            }
          }
        }
      }
    }
    .describe-wrap{
      height: 180px;
      background-color: #999;
      padding-top: 40px;
      .describe-box{
        .describe-item{
          color: #FFF;
          .item-text{
            font-size: 14px;
            h4{
              font-size: 18px;
              margin: 5px 0;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
</style>
